<template>
  <view class="why-choose-us-section flex-col">
    <page-meta :page-style="pageStyle"></page-meta>
    <view class="section-header flex-row justify-between">
      <image src="https://image.chushouya.com/assets/images/home/img_title_reason.png" mode="aspectFill" class="section-title"></image>
      <view class="more-link flex-row justify-between" @click="showMorePop">
        <text class="more-text">了解更多</text>
        <image src="https://image.chushouya.com/assets/images/home/icon_more.png" mode="aspectFill"></image>
      </view>
    </view>
    <view class="feature-cards-container flex-row justify-between">
      <view
        class="feature-card flex-col"
        v-for="(item, index) in features"
        :key="index"
      >
        <common-image :src="item.image" :styles="'width: 120rpx; height: 120rpx; display: block; margin: 0 auto;'"  mode="aspectFit"/>
        <text class="feature-title">{{item.name}}</text>
        <text class="feature-description">{{ item.desc }}</text>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom" border-radius="24rpx 24rpx 0 0" :safe-area="false" @change="onPopupChange" class="custom-popup">
      <view class="more-popup" @touchmove.stop>
        <view class="popup-head"><image src="https://image.chushouya.com/assets/images/home/icon_close.png" mode="aspectFill" class="popup-close" @click="closeMorePop"></image></view>
        <view class="popup-content">
          <view class="mode-1 mode">
            <image src="https://image.chushouya.com/assets/images/home/icon_jshs.png" mode="aspectFill"></image>
            <view>
              <view class="main">极速回收，随时可退<text class="tag">可退货</text></view>
              <view class="sub"><text>最长30天内可退货</text><text>最快30分钟内完成</text></view>
            </view>
          </view>
          <view class="mode-2 mode">
            <image src="https://image.chushouya.com/assets/images/home/icon_bjhs.png" mode="aspectFill"></image>
            <view>
              <view class="main">比价回收，顺丰30分钟上门</view>
              <view class="sub">直接回收，支持全行业比价</view>
            </view>
          </view>
          <div class="grid-table">
            <div class="grid-header">
              <div>VS</div>
              <div>可退货回收</div>
              <div>比价回收</div>
            </div>
            <div class="grid-row">
              <div>回收流程</div>
              <div>线上估价</div>
              <div>线上估价</div>
            </div>
            <div class="grid-row">
              <div>回收范围</div>
              <div class="span-2">手机、手表、奢侈品等</div>
            </div>
            <div class="grid-row">
              <div>是否可退货</div>
              <div>支持30天退货</div>
              <div>不支持退货</div>
            </div>
            <div class="grid-row">
              <div>回收方式</div>
              <div>上门、快递</div>
              <div>上门、快递</div>
            </div>
          </div>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: 'WhyChooseUs',
  data() {
    return {
      features: [
        {
          image: 'https://image.chushouya.com/assets/images/home/img_yjyy.png',
          name: '一键预约',
          desc: '随时随地处理闲置',
        },
        {
          image: 'https://image.chushouya.com/assets/images/home/img_smhs.png',
          name: '上门回收',
          desc: '当面质检当面成交',
        },
        {
          image: 'https://image.chushouya.com/assets/images/home/img_sfby.png',
          name: '顺丰包邮',
          desc: '价格不满意顺丰包邮退',
        },
        {
          image: 'https://image.chushouya.com/assets/images/home/img_zyhs.png',
          name: '专业回收',
          desc: '回收更专业，处理更省心',
        }
      ],
      pageStyle: ''
    }
  },
  methods:{
    showMorePop(){
      this.$refs.popup.open()
    },
    closeMorePop(){
      this.$refs.popup.close()
    },
	onPopupChange(e) {
	  if (e.show) {
		this.pageStyle = 'overflow: hidden; height: 100vh;';
	  } else {
		this.pageStyle = '';
	  }
	}
  }
}
</script>

<style scoped lang="scss">
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-between {
  justify-content: space-between;
}

.why-choose-us-section {
  background-color: #FFFFFF;
  border-radius: 12px;
  width: 100%;
  align-self: center;
  margin-top: 20rpx;
  padding: 32rpx;
}

.section-header {
  margin-bottom: 24rpx;
  width: 100%;
  padding: 0 4rpx;
  box-sizing: border-box;
  align-items: center;
}

.section-title {
  width: 272rpx;
  height: 38rpx;
}

.more-link {
  align-items: center;
  display: flex;
  flex-direction: row;
  image {
    width: 32rpx;
    height: 32rpx;
  }
}

.more-text {
  overflow-wrap: break-word;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #333333;
  margin-right: 8rpx;
}

.arrow-icon {
  width: 28rpx;
  height: 28rpx;
}

.feature-cards-container {
  width: 100%;
  flex-wrap: wrap;
}

.feature-card {
  width: 300rpx;
  align-items: center;
  margin-top: 32rpx;
}

.feature-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 12rpx;
}

.feature-title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  text-align: center;
  margin-top: 6rpx;
  margin-bottom: 4rpx;
}

.feature-description {
  font-family: PingFangSC, PingFang SC;
  font-weight: 300;
  font-size: 24rpx;
  color: #999999;
}

.more-popup {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  height: fit-content;
  .popup-head {
    width: 100%;
    height: 190rpx;
    background: url(https://image.chushouya.com/assets/images/home/more_bg.png) no-repeat center;
    background-size: 100% 100%;
    padding: 32rpx;
    text-align: right;
    .popup-close {
      width: 24rpx;
      height: 24rpx;
      margin-left: auto;
    }
  }
  .popup-content {
    padding: 20rpx 32rpx 48rpx;
    box-sizing: border-box;
    .mode {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      background: #F8F9FA;
      border-radius: 24rpx;
      padding: 32rpx;
      box-sizing: border-box;
        image {
          width: 110rpx;
          height: 110rpx;
          margin-right: 24rpx;
        }
        .main {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
          margin-bottom: 8rpx;
          .tag {
            display: inline-block;
            width: 98rpx;
            height: 36rpx;
            line-height: 36rpx;
            background: #FFAA00;
            border-radius: 22rpx 22rpx 22rpx 0rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #FFFFFF;
            margin-left: 10rpx;
            text-align: center;
          }
        }
        .sub {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
        }
    }
    .mode-2 {
      margin-top: 24rpx;
      margin-bottom: 32rpx;
    }
    .grid-table {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      border-radius: 24rpx;
      border: 1rpx solid #EEEEEE;
    }
    .grid-header, .grid-row {
      display: contents;
      text-align: center;
      div{
        &:first-child{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #333333;
        }
      }
    }
    .grid-header {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #333333;
      height: 104rpx;
      line-height: 104rpx;
      div{
        border-right: 1rpx solid #EEEEEE;
        &:first-child{
          border-top-left-radius: 24rpx;
        }
        &:last-child{
          border-top-right-radius: 24rpx;
          border-right: none;
        }
        font-weight: 500;
        background-color: #F8F9FA;
      }
    }
    .grid-row {
      height: 84rpx;
      line-height: 84rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
      div{
        border-top: 1rpx solid #EEEEEE;
        border-right: 1rpx solid #EEEEEE;
         &:last-child{
          border-right: none;
         }
      }
    }
    .grid-header > div,
    .grid-row > div {
      padding: 8px;
    }
    .span-2 {
      grid-column: span 2; /* 跨 2 列 */
    }
  }
}
::v-deep {
	.custom-popup {
	  // #ifdef MP-ALIPAY 
	  .uni-popup__wrapper {
		bottom: 0;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: 0!important;
	  }
	  
	  .uni-popup__wrapper.uni-popup__wrapper--bottom {
		transform: translateY(0) !important;
		padding-bottom: 0!important;
	  }
	  // #endif
	}
}
</style>
